@use '../core' as *;

.menu {
    padding-top: $spacing-size-8;

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        --right-margin: #{$spacing-size-16};

        width: var(--layout-width-3-12);
        padding-top: $spacing-size-10;
        padding-bottom: $spacing-size-24;

        ul {
            display: block;
        }
    }

    @media screen and (min-width: $breakpoint-docs-nav-large) {
        width: calc(var(--layout-width-3-12) - var(--right-margin));
    }
}
